<template>
	<view class="warpbox">
		<!-- #ifdef MP-WEIXIN -->
		<cover-view class="headerbox" :style="{height:topHeight+'px',paddingTop:paddingHeight+'px'}">
			<cover-view class="search_box" :style="{width:searchWidth+'rpx'}" @click="toSearch">
				<cover-image :src="BASE_IMG_URL+'ss.png'" class="icon-search"></cover-image>
				<cover-view class="self_search">输入客户、线索、联系人搜索</cover-view>
			</cover-view>
		</cover-view>
		<cover-view :style="{height:topHeight+'px'}"></cover-view>
		<!-- #endif -->
		<!-- #ifdef MP-ALIPAY || APP-PLUS -->
		<view class="headerbox_h5" style="height:150rpx">
			<view class="search_box" :style="{width:searchWidth+'rpx'}" @click="toSearch">
				<image :src="BASE_IMG_URL+'search.png'" class="iconsearch" mode="scaleToFill"></image>
				<input type="text" disabled placeholder="输入客户、线索、联系人搜索" class="self_search">
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<view class="headerbox_h5">
			<view class="search_box" :style="{width:searchWidth+'rpx'}" @click="toSearch">
				<image :src="BASE_IMG_URL+'search.png'" class="iconsearch" mode="scaleToFill"></image>
				<input type="text" disabled placeholder="输入客户、线索、联系人搜索" class="self_search">
			</view>
		</view>
		<!-- #endif -->

		<view class="topbox">
			<view class="top_warp">
				<view class="top_fir" @click="toWaterCustomer">
					<image :src="BASE_IMG_URL+'index_new_1.png'" mode="scaleToFill"></image>
					<view>公海客户</view>
				</view>
				<view class="top_fir" @click="toIndexClue">
					<image :src="BASE_IMG_URL+'index_new_2.png'" mode="scaleToFill"></image>
					<view>线索</view>
				</view>
				<view class="top_fir" @click="toIndexRecord">
					<image :src="BASE_IMG_URL+'index_new_4.png'" mode="scaleToFill"></image>
					<view>跟进记录</view>
				</view>
				<view class="top_fir" @click="toIndexContract">
					<image :src="BASE_IMG_URL+'index_new_5.png'" mode="scaleToFill"></image>
					<view>合同</view>
				</view>
			</view>
		</view>

		<view class="fun_warp">
			<view class="fun_top">
				<view class="fun_tit">常用功能</view>
			</view>
			<view class="fun_box">
				<view class="fun_fir" @click="toBusiness">
					<image :src="BASE_IMG_URL+'business.png'" mode="scaleToFill"></image>
					<view>商机</view>
				</view>
				<view class="fun_fir" @click="toCluePool">
					<image :src="BASE_IMG_URL+'clue_chi.png'" mode="scaleToFill"></image>
					<view>线索池</view>
				</view>
				<view class="fun_fir" @click="approve">
					<image :src="BASE_IMG_URL+'index_new_20.png'" mode="scaleToFill"></image>
					<view>办公</view>
				</view>
				<view class="fun_fir" @click="toCostList">
					<image :src="BASE_IMG_URL+'feiyong1.png'" mode="scaleToFill"></image>
					<view>费用</view>
				</view>
				<view class="fun_fir" @click="workreport">
					<image :src="BASE_IMG_URL+'index_new_12.png'" mode="scaleToFill"></image>
					<view>工作报告</view>
				</view>
				<view class="fun_fir" @click="agendar">
					<image :src="BASE_IMG_URL+'index_new_17.png'" mode="scaleToFill"></image>
					<view>日程</view>
				</view>
				<view class="fun_fir" @click="toPayPlan">
					<image :src="BASE_IMG_URL+'index_new_18.png'" mode="scaleToFill"></image>
					<view>回款计划</view>
				</view>
				<view class="fun_fir" @click="toPayment">
					<image :src="BASE_IMG_URL+'index_new_23.svg'" mode="scaleToFill"></image>
					<view>回款单</view>
				</view>
				<view class="fun_fir" @click="achieveStatis">
					<image :src="BASE_IMG_URL+'index_new_9.png'" mode="scaleToFill"></image>
					<view>业绩统计</view>
				</view>
				<view class="fun_fir" @click="toProductList">
					<image :src="BASE_IMG_URL+'index_new_11.png'" mode="scaleToFill"></image>
					<view>产品</view>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<view class="fun_fir" @click="toClock">
					<image :src="BASE_IMG_URL+'daka1.png'" mode="scaleToFill"></image>
					<view>打卡</view>
				</view>
				<!-- #endif -->
			</view>
		</view>
		<!-- 数据简报 -->
		<view class="pre-right">
			<picker @change="changeType" :range="typeList" :value="typeIndex">
				<view class="form_right">
					<view style="margin-right:15rpx">{{typeList[typeIndex] ? typeList[typeIndex] : '点击选择'}}</view>
					<image :src="BASE_IMG_URL+'newxia.png'" class="bottomimg" mode="scaleToFill"></image>
				</view>
			</picker>
			<view class="form_right" style="margin-right:0" @click="changeDataTime">
				<view style="margin-right:15rpx">{{text ? text : '点击选择'}}</view>
				<image :src="BASE_IMG_URL+'newxia.png'" class="bottomimg" mode="scaleToFill"></image>
			</view>
		</view>
		<view class="dataPre">
			<view class="pre_list">
				<view class="pre_title">
					数据简报
				</view>
			</view>
			<view class="pre_content">
				<view class="content_item" @click="toCheckBusiness">
					<view>{{info.business ? info.business : '0'}}</view>
					<view>新增商机</view>
				</view>
				<view class="content_item" @click="toClue">
					<view>{{info.leads ? info.leads : '0'}}</view>
					<view>新增线索</view>
				</view>
				<view class="content_item" @click="toCustomer">
					<view>{{info.customer ? info.customer : '0'}}</view>
					<view>新增客户</view>
				</view>
				<view class="content_item" @click="toRecord">
					<view>{{info.record ? info.record : '0'}}</view>
					<view>新建跟进</view>
				</view>
				<view class="content_item" @click="toContract">
					<view>{{info.contract ? info.contract : '0'}}</view>
					<view>新增合同</view>
				</view>
				<view class="content_item" @click="toContract">
					<view>{{info.contract_money ? info.contract_money :'0'}}</view>
					<view>合同金额</view>
				</view>
				<view class="content_item" @click="toReturnedMoney">
					<view>{{info.receivables ? info.receivables : '0'}}</view>
					<view>回款金额</view>
				</view>
				
				<view class="content_item" @click="toCus(1)">
					<view>{{info.customer_complate ? info.customer_complate : '0'}}</view>
					<view>客户成交量</view>
				</view>
				<view class="content_item" @click="toCus(0)">
					<view>{{info.customer_nocomplate ? info.customer_nocomplate : '0'}}</view>
					<view>客户未成交量</view>
				</view>
				<view class="content_item" @click="toBus(2)">
					<view>{{info.business_complate ? info.business_complate : '0'}}</view>
					<view>商机成交量</view>
				</view>
				<view class="content_item" @click="toBus(1)">
					<view>{{info.business_nocomplate ? info.business_nocomplate : '0'}}</view>
					<view>商机未成交量</view>
				</view>
				<view class="content_item" @click="toBus(2)">
					<view>{{info.business_complate_money ? info.business_complate_money : '0'}}</view>
					<view>商机成交金额</view>
				</view>
				<view class="content_item" @click="toBus(1)">
					<view>{{info.business_nocomplate_money ? info.business_nocomplate_money : '0'}}</view>
					<view>商机未成交金额</view>
				</view>
			</view>
		</view>
		<!-- 业绩目标 -->
		<view class="body_head">
			<view class="conwarp">
				<view class="con_title">业绩目标</view>
				<picker @change="changeAchieve" :range="achieveArr" :value="achieveIndex" :range-key="'name'">
					<view class="achivebox">
						<view class="achitit">{{achieveArr[achieveIndex] ? achieveArr[achieveIndex].name : '点击选择'}}</view>
						<image :src="BASE_IMG_URL+'newxia.png'" class="bottomimg" mode="scaleToFill"></image>
					</view>
				</picker>
			</view>
			<view class="con_head">
				<view class="dountChart">
					<qiun-data-charts type="arcbar" :animation="false" :opts="oneChart" canvasId="asdb" :canvas2d="true"
						:chartData="chartData" />
				</view>
				<view class="money_show">
					<view class="money_target">
						<view>目标金额</view>
						<view>&yen; {{target_money}}</view>
					</view>
					<view class=".money_target">
						<view>完成金额</view>
						<view>&yen; {{complete_money}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view style="font-size:24rpx;text-align: center;color:#666;margin-top:30rpx">版权归属:山西青动时代科技有限公司</view> -->
		
		<!-- 时间筛选 -->
		<screen-pop ref="screenChild" @sureTime="sureTime"></screen-pop>
		<!-- 底部导航 -->
		<uniTabbar v-if="tipNumber || tipNumber==0" :tipNumber="tipNumber"></uniTabbar>
	</view>
</template>
<script>
	import uniTabbar from '@/components/tabbar/tabbar.vue'
	import {
		BASE_IMG_URL
	} from '@/util/api.js'
	import {
		pageJumps,
		statisticalPageJumps
	} from "@/pagesA/crm/crm_page_jumps.js";
	import {
		netAgentList
	} from '@/api/clues.js'
	import {
		getNowData
	} from '@/util/weekTime.js'
	import {
		netGetBriefdata,
		netTurnoverList
	} from '@/api/kehu.js'
	import {
		netGetData,
		netTime
	} from '@/api/index.js'
	import {
		netMapKey
	} from '@/api/login.js'
	import screenPop from './screen.vue'
	

	export default {
		mixins: [pageJumps, statisticalPageJumps],
		components: {
			uniTabbar,
			screenPop
		},
		data() {
			return {
				topHeight: 0,
				paddingHeight: 0,
				searchWidth: 470,
				BASE_IMG_URL: BASE_IMG_URL,
				tipNumber: null,
				typeList: ['本人及下属', '仅本人', '仅下属'],
				typeIndex: 0,
				dataTime: '',
				startTime:'',
				endTime:'',
				text:'本月',
				info: {}, //数据简报 数据
				target_money: 0, //目标金额
				complete_money: 0, //完成 金额
				percentage: 0, //百分比
				shows: false,
				approvelNum: 0,
				oneChart:{},
				chartData: {},
				//业绩目标
				achieveArr:[
					{id:1,name:'合同'},
					{id:2,name:'回款'}
				],
				achieveIndex:0
			}
		},
		onLaunch() {
		
		},
		onLoad() {
			//获取设备信息
			uni.getSystemInfo({
				success: (res) => {
					let HeaderBar = 0
					// #ifdef MP-WEIXIN
					let rect = wx.getMenuButtonBoundingClientRect();
					HeaderBar = rect.height + (rect.top - res.statusBarHeight) * 2 + res.statusBarHeight + 5;
					this.topHeight = HeaderBar;
					this.paddingHeight = rect.top
					this.searchWidth = 470
					// #endif
					// #ifdef MP-ALIPAY || APP-PLUS
					HeaderBar = res.pixelRatio * res.statusBarHeight
					this.topHeight = HeaderBar
					this.paddingHeight = res.statusBarHeight
					this.searchWidth = 690
					// #endif
					// #ifdef H5 
					this.topHeight = 72
					this.paddingHeight = 24
					this.searchWidth = 690
					// #endif
				}
			})
			
		},
		onShow() {
			this.roleType = uni.getStorageSync('roleType')
			this.rules = uni.getStorageSync('rules')
			this.dataTime = getNowData().substr(0, 7)
			if (uni.getStorageSync('isAuth')) {
				this.getTip()
			} else {
				this.tipNumber = 0
			}
		},
		methods: {
			//切换业绩目标
			changeAchieve(e) {
				this.achieveIndex = e.detail.value
				// 业绩目标
				this.getTarget()
			},
			getTime() {
				netTime({times:'thismonth'}).then(res=>{
					res = res.data
					this.startTime = res.times[0]
					this.endTime = res.times[1]
					//当月 数据 简报、
					this.getData()
					// 业绩目标
					this.getTarget()
				})
			},
			getOpenid() {
				netMapKey().then(res => {
					uni.setStorageSync('mapKey', res.data.map_key)
					uni.setStorageSync('appid', res.data.appid)
				})
			},
			getTip() {
				netAgentList().then(res => {
					uni.setStorageSync('token', res.data.userinfo.token)
					uni.setStorageSync('roleType', res.data.userinfo.role_type)
					uni.setStorageSync('rules', res.data.userinfo.rules)
					this.tipNumber = res.data.total
					this.approvelNum = res.data.examine.count
					//获取默认 时间的数据
					this.getTime()
					//获取appid
					this.getOpenid()
				})
			},
			getData() {
				let params = {
					times: this.startTime+','+this.endTime,
					type: this.typeIndex
				}
				netGetBriefdata(params).then(res => {
					this.info = res.data
				})
			},
			getTarget() {
				let params = {
					times: this.startTime+','+this.endTime,
					type: this.typeIndex,
					status: this.achieveArr[this.achieveIndex].id,
				}
				netGetData(params).then(res => {
					this.complete_money = res.data.contract_moneys
					this.target_money = res.data.achievement
					let ratio = res.data.ratio>=100?100:res.data.ratio
					let obj = {
						series: [{
							name: "已完成",
							color: "#2979ff",
							data: ratio/100
						}]
					};
					let b = {
						title: {
							name: res.data.ratio+'%',
							fontSize: 18,
							color: "#2979ff"
						},
						subtitle: {
							name: "完成率",
							fontSize: 15,
							color: "#666666"
						},
						extra: {
							arcbar: {
								type: "circle",
								width: 12,
								backgroundColor: "#E9E9E9",
								startAngle: 1.5,
								endAngle: 0.25,
								gap: 2
							}
						}
					}
					this.oneChart = b
					this.chartData = obj;
				})
			},
			changeType(e) {
				this.typeIndex = e.detail.value
				this.getData()
				this.getTarget()
			},
			changeDataTime(e) {
				this.$refs.screenChild.init()
			},
			sureTime(params) {
				console.log(params,'====')
				if(params.text && params.start_time && params.end_time){
					this.text = params.text
					this.startTime = params.start_time
					this.endTime = params.end_time
					this.getData()
					this.getTarget()
				}
			},
			//产品列表
			toProductList() {
				uni.navigateTo({
					url: '/pagesA/product/index'
				})
			},
			//回款列表
			toPayment() {
				uni.navigateTo({
					url: '/pagesA/payment/index'
				})
			},
			//费用管理
			toCostList() {
				uni.navigateTo({
					url: '/pagesA/cost/index'
				})
			},
			//回款列表
			toPayment() {
				uni.navigateTo({
					url: '/pagesA/payment/index'
				})
			},
			//回款计划
			toPayPlan() {
				uni.navigateTo({
					url: '/pagesA/payplan/index'
				})
			},
			//业绩统计
			achieveStatis() {
				uni.navigateTo({
					url:'/pagesA/crm/statisticalFrom/achieveStatis'
				})
			},
			//打卡
			toClock() {
				uni.navigateTo({
					url:'/pagesA/punchclock/index'
				})
			},
			//商机
			toBusiness() {
				uni.navigateTo({
					url:'/pagesA/business/index'
				})
			},
			//数据简报的  商机
			toCheckBusiness() {
				uni.navigateTo({
					url:'/pagesA/business/index?type='+this.typeIndex+'&stime='+this.startTime+'&etime='+this.endTime,
				})
			},
			//客户成交量  未成交量
			toCus(status) {
				uni.navigateTo({
					url:'/pagesA/crm/customerManagement/customerManagement?cusStatus='+status+'&stime='+this.startTime+'&etime='+this.endTime,
				})
			},
			//商机成交量  未成交量
			toBus(status) {
				uni.navigateTo({
					url:'/pagesA/business/index?busStatus='+status+'&stime='+this.startTime+'&etime='+this.endTime,
				})
			},
			//线索池
			toCluePool() {
				uni.navigateTo({
					url:'/pagesB/cluepool/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-progress-info {
		text-align: center;
	}

	.headerbox_h5 {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-top: var(--status-bar-height);
		padding-left: 30rpx;
		z-index: 9;
		background: #DFF0FF;
		box-sizing: border-box;
		width: 100%;
		height: 100rpx;

		.search_box {
			height: 60rpx;
			border-radius: 30rpx;
			background: #fff;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 0 15rpx;

			.iconsearch {
				width: 50rpx;
				height: 50rpx;
				margin-right: 20rpx;
			}

			.self_search {
				font-size: 24rpx;
				color: #333;
				height: 58rpx;
				line-height: 58rpx;
				padding: 0;
				margin: 0;
				width: 500rpx;
			}
		}
	}

	.headerbox {
		background: #DFF0FF;
		box-sizing: border-box;
		width: 100%;
		height: 150rpx;
		position: fixed;
		left: 0;
		top: 0rpx;
		padding-top: var(--status-bar-height);
		padding-left: 30rpx;
		z-index: 9;

		.search_box {
			height: 60rpx;
			border-radius: 30rpx;
			background: #fff;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 0 15rpx;

			.icon-search {
				width: 40rpx;
				height: 35rpx;
				margin-right: 20rpx;
				position: relative;

				&::before {
					content: '';
					width: 0;
					height: 0;
				}
			}

			.self_search {
				font-size: 24rpx;
				color: #666;
				height: 58rpx;
				line-height: 58rpx;
				padding: 0;
				margin: 0;
				width: 500rpx;
			}
		}
	}

	.topbox {
		width: 100%;
		background: linear-gradient(180deg, #DFF0FF 0%, #F1F4F6 48%, #F4F4F4 100%);

		.top_warp {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			padding: 30rpx 60rpx;
			text-align: center;

			.top_fir {
				font-size: 24rpx;
				color: #333;

				image {
					width: 70rpx;
					height: 70rpx;
					margin-bottom: 10rpx;
				}
			}
		}
	}

	.fun_warp {
		padding: 30rpx 24rpx;
		background: #fff;
		width: 710rpx;
		margin: 0 auto;
		border-radius: 10rpx;
		box-shadow: 1rpx 1rpx 10rpx rgba(0, 0, 0, 0.1);

		.fun_top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 25rpx;

			.fun_tit {
				font-size: 26rpx;
				color: #333333;
				font-weight: 700;
			}
		}

		.fun_box {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;

			.fun_fir {
				flex-shrink: 0;
				background: #fff;
				border-radius: 10rpx;
				text-align: center;
				width: 23%;
				height: 150rpx;
				margin-right: 14rpx;
				margin-bottom: 24rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				color: #000;
				position: relative;

				&:nth-child(4n) {
					margin-right: 0;
				}

				image {
					width: 50rpx;
					height: 50rpx;
					margin-bottom: 15rpx;
				}

				.tab-number {
					font-size: 24rpx;
					color: #fff;
					background: #F43F3B;
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					text-align: center;
					line-height: 40rpx;
					position: absolute;
					right: 30rpx;
					top: 0;
				}
			}
		}
	}

	.pre-right {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 0 30rpx;
		margin: 20rpx 0 30rpx 0;
		.form_right {
			width: 180rpx;
			height: 50rpx;
			line-height: 48rpx;
			border-radius: 8rpx;
			background: #fff;
			margin-right: 15rpx;
			font-size: 22rpx;
			color: #666;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: 2rpx 2rpx 50rpx rgba(0, 0, 0, 0.1);

			.bottomimg {
				width: 20rpx;
				height: 33rpx;
			}
		}

		// .newimg{
		// 	image{
		// 		width:20rpx;
		// 		height:33rpx;
		// 	}
		// }
	}

	.dataPre {
		background-color: #fff;
		border-radius: 10rpx;
		box-sizing: border-box;
		padding: 20rpx 0 40rpx;
		margin: 0 24rpx 30rpx 24rpx;
		border-radius: 20rpx;
		box-shadow: 1rpx 1rpx 10rpx rgba(0, 0, 0, 0.1);

		.pre_content {
			background-color: #fff;
			display: flex;
			flex-wrap: wrap;
			.content_item {
				width: 33.33%;
				text-align: center;
				:first-child {
					font-size: 32rpx;
					font-weight: 600;
					margin-top: 26rpx;
					margin-bottom: 10rpx;
					color:#333;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				:last-child {
					font-size: 24rpx;
					padding: 0 20rpx;
					color: #999;
				}
			}
		}
	}

	.pre_list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;

		.pre_title {
			font-size: 28rpx;
			font-weight: 700;
		}
	}

	.body_head {
		width: 702rpx;
		margin: 0 auto;
		box-sizing: border-box;
		padding: 30rpx;
		border-radius: 20rpx;
		background: #fff;
		box-shadow: 1rpx 1rpx 10rpx rgba(0, 0, 0, 0.1);
		z-index: 5;
		.conwarp{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.con_title {
				font-weight: 700;
				font-size: 28rpx;
			}
			.achivebox{
				font-size:24rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				.achitit{
					margin-right:10rpx;
				}
				.bottomimg{
					width: 35rpx;
					height: 33rpx;
				}
			}
		}
		

		.con_head {
			display: flex;
			align-items: center;

			.dountChart {
				margin-top: 70rpx;
				width: 350rpx;
				height: 350rpx;
				margin-right: 24rpx;
			}

			.money_show {
				padding-top: 45rpx;

				.money_target {
					:first-child {
						margin-bottom: 30rpx;
						color: #666;
					}

					:last-child {
						font-size: 40rpx;
						margin-bottom: 30rpx;
						color: #000;
					}
				}
			}
		}
	}
</style>
